<template>
	<view>
		<view class="btns iceFlexAd">
			<view class="iceFlexSt" @click="totalTime">
				<u-icon name="clock" color="#999" size="28"></u-icon>
				<text class="time" :class="{jicu2:jicu == 0,jicu:jicu == 1,}">{{submitData.duration}}</text>
				<!-- {{second}} -->
			</view>
			<view class="iceFlexSt" @click="emits('fontSizeConfig')">
				<u-icon name="level" color="#999" size="28"></u-icon>
				<text>字体</text>
			</view>
			<view class="iceFlexSt" @click="emits('QAInfo')">
				<u-icon name="grid-fill" color="#999" size="28"></u-icon>
				<text>面板</text>
			</view>
		</view>
		<iceMessage :msgParams="msgParams.value" @iceClose="msgParams.isOpen=false" />
	</view>
</template>
<script setup>
	import {
		ref,
		reactive
	} from 'vue'
	import {
		countdownTimer
	} from '@/utils/function.js'
	import {
		onHide,
	} from '@dcloudio/uni-app'
	import {
		setGetAllData
	} from '@/src/utils/icePinia';
	import {
		iceGetStorage
	} from '../../utils/common';
	import {
		postHandExamPages
	} from '../../src/api/runApi';
	const submitData = setGetAllData().submitData
	const msgParams = reactive({
		value: {
			msgType: '',
			messageText: '',
			isOpen: false
		}
	})
	const emits = defineEmits(['fontSizeConfig', 'QAInfo'])
	const second = ref(0)
	const timer = ref(null)
	const duration = ref(0)
	const jicu = ref(-1)
	iceGetStorage('duration').then(res => {
		duration.value = res * 60
		// duration.value = res
	})
	timer.value = setInterval(() => {
		second.value++
		if (duration.value - second.value < 60 && duration.value - second.value > 57) {
			msgParams.value = {
				msgType: 'e',
				messageText: '1分钟后自动交卷',
				isOpen: true
			}
			jicu.value = 0
		} else if (duration.value - second.value < 30 && duration.value - second.value > 27) {
			msgParams.value = {
				msgType: 'e',
				messageText: '30秒后自动交卷',
				isOpen: true
			}
			jicu.value = 1
		}
		submitData.duration = countdownTimer(second.value)
		if (second.value > duration.value) {
			clearInterval(timer.value)
			postHandExamPages(msgParams, true)
			
		}
		
	}, 1000)
	onHide(() => {
		clearInterval(timer.value)
	})
	const back = () => {
		// postIndexLogin({title:'title',name:'name'}).then(res=>{
		// 	console.log(res)
		// })
		uni.navigateTo({
			url: '/pages/welcome/index'
		})
	}
</script>

<style lang="scss" scoped>
	// 摇摆动画
	@import '@/static/css/jicu.scss';

	.jicu2 {
		color: #aa0;
	}

	.jicu {
		color: #f00;
	}

	.btns {
		width: 100%;
		height: 30px;
		padding: 10px 0;
		// box-shadow: 1px 3px 5px #999;

		view {
			width: 18%;
			height: 30px;
			// background-color: red;
			color: #999;

			.time {
				letter-spacing: 0.1em;
			}

			.u-icon {
				margin-right: 16px;
			}
		}
	}
</style>